<template>
    <div class="photoinfo-container">
        <h3 class="photoinfo-title">{{photoinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间:{{photoinfo.add_time | dataFormat}}</span>
            <span>点击:{{photoinfo.click}}次</span>
        </p>

        <hr>

        <vue-preview :slides="list" class="imgPrev"></vue-preview>


        <div class="content" v-html="photoinfo.content"></div>

        <cmt-box :id="id"></cmt-box>
    </div>
</template>

<script>

import comment from '../subcomponents/Comment.vue'

export default {
    data(){
        return {
            id : this.$route.params.id,
            photoinfo : {},
            list : []
        }
    },
    created(){
        this.getPhotoInfo();
        this.getThumbs();
    },
    methods:{
        getPhotoInfo(){
            /* this.$http.get('/'+this.id).then(result => {
                if(result.body.status === 0){
                    this.photoinfo = result.body.message[0];
                }
            }) */

            this.photoinfo = {id:this.id,add_time:"2019-10-12 12:12:12",click:12,content:"哈哈哈哈哈啊哈heiehieheiehei<div style='color:red'>滚谷歌</div>一入江湖岁月催",title:"人间正道是沧桑"}
        },
        getThumbs(){
            /* this.$http.get('/'+this.id).then(result => {
                if(result.body.status === 0){
                    result.body.message.forEach(item => {
                        item.w = 600
                        item.h = 400
                    });
                    this.list =  result.body.message;
                }
            }) */

            var data = [{src:"/src/images/1.jpg"},{src:"/src/images/2.jpg"},{src:"/src/images/3.jpeg"},{src:"/src/images/4.jpg"},{src:"/src/images/5.jpg"}]
            data.forEach(item => {
                item.w = 600
                item.h = 400
                item.msrc = item.src;
            });
            this.list =  data;
        }
    },
    components:{
        'cmt-box':comment
    }
}
</script>

<style lang="scss">
.photoinfo-container{
    padding: 3px;
    .photoinfo-title{
        color: #26A2FF;
        font-size: 15px;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }
    .content{
        font-size: 13px;
        line-height: 30px;
    }

    .imgPrev{
        .my-gallery{
            figure{
                display: inline-block;
                margin: 10px;
            }
            img{
                width: 110px;
                height: 100px;
                box-shadow: 0 0 8px #999;
            }
        }
    }
}
</style>